<!--点击报名按钮跳转至该页面-->
<template>
    <div>
        <el-card style="width: 50%;margin:auto">
            <el-form :model="enroll" label-width="80px" :rules="rules" ref="formRef" style="padding-right: 20px">
                <el-form-item label="竞赛序号" prop="signid">
                    <el-input disabled v-model="news.id"></el-input>
                </el-form-item>
                <el-form-item label="竞赛标题" prop="title">
                    <el-input disabled v-model="news.title"></el-input>
                </el-form-item>
                <el-form-item label="竞赛类型" prop="sign">
                    <el-input disabled v-model="news.sign"></el-input>
                </el-form-item>
                <el-form-item label="参赛者" prop="username">
                    <el-input disabled v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="学部" prop="major">
                    <el-input disabled v-model="user.major"></el-input>
                </el-form-item>
                <el-form-item label="指导教师" prop="teacher">
                    <el-select v-model="enroll.teacher" placeholder="请选择指导教师">
                        <el-option
                                v-for="item in teachers"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="参赛作品" prop="opus">
                    <template v-slot:label>
                        <span v-show="!rules.opus[0].required"
                              style="color: #ff4949;margin-right: 4px;">*</span>
                        <span>参赛作品</span>
                    </template>
                    <el-upload
                            v-model="enroll.opus"
                            ref="upload"
                            action="http://localhost:9090/file/uploadopus"
                            accept=".zip, .rar"
                            :headers="{ token: user.token }"
                            :file-list="enroll.opus ? [enroll.opus] : []"
                            :limit="1"
                            :on-exceed='limitCheck'
                            :before-upload="beforeUploadopus"
                            :on-success="uploadSuccessopus"
                            :on-remove="handleRemove"
                    >
                        <el-button size="small" type="primary" style="margin-left: 10px">选择文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传.rar，.zip文件且不超过10MB</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="审核资料" prop="audits">
                    <template v-slot:label>
                        <span v-show="!rules.audits[0].required"
                              style="color: #ff4949;margin-right: 4px;">*</span>
                        <span>审核资料</span>
                    </template>
                    <el-upload
                            v-model="enroll.audits"
                            ref="upload"
                            action="http://localhost:9090/file/uploadaudit"
                            accept=".pdf"
                            :headers="{ token: user.token }"
                            :file-list="enroll.audits ? [enroll.audits] : []"
                            :limit="1"
                            :on-exceed='limitCheck'
                            :before-upload="beforeUploadaudit"
                            :on-success="uploadSuccessaudit"
                            :on-remove="handleRemove"
                    >
                        <el-button size="small" type="primary" style="margin-left: 10px">选择文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传.pdf文件且不超过5MB</div>
                    </el-upload>
                </el-form-item>
                <div style="text-align: center">
                    <el-button type="primary" @click="add">报 名</el-button>
                    <el-button style="margin-left: 500px" @click="$router.push('/news')">返回</el-button>
                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "EnrollForm",
        data() {

            return {
                enroll: {
                    teacher: ''
                },
                news: {},
                user: JSON.parse(localStorage.getItem("honey-user") || '{}'),//拿取个人用户信息
                //教师
                teachers: [],
                rules: {
                    teacher: [
                        {required: true, message: '请选择指导教师', trigger: 'blur'}
                    ],
                    opus: [
                        { required: true, message: "参赛作品不能为空", trigger: ["blur", 'change'] },
                    ],
                    audits: [
                        { required: true, message: "审核资料不能为空", trigger: ["blur", 'change'] },
                    ],
                },
            }
        },
        created() {
            let id = this.$route.query.id
            if (!id) {
                return
            }
            this.$request.get('/news/selectById/' + id).then(res => {
                this.news = res.data
            })
            //接收教师值
            this.$request.get('/user/selectTeacher').then(res => {
                this.teachers = res.data
            })
        },
        methods: {
            handleRemove(file, fileList) {
                this.enroll.opus = fileList;
                this.rules.opus[0].required = true;
            },
            // 选择的文件超出限制的文件总数量时触发
            limitCheck() {
                this.$message.warning('每次只能上传一个文件')
            },
            uploadSuccessopus(response, file, fileList) {
                this.enroll.opus = response.data
                this.rules.opus[0].required = false;
                console.log(response);
            },
            uploadSuccessaudit(response, file, fileList){
                this.enroll.audits = response.data
                this.rules.audits[0].required = false;
                console.log(response);
            },
            beforeUploadaudit(file){
                //格式验证
                let fileName = file.name
                let pos = fileName.lastIndexOf('.')
                const isLt5M = file.size / 1024 / 1024 < 5;
                let lastName = fileName.substring(pos, fileName.length)
                if (!isLt5M) {
                    setTimeout(() => {
                        this.$message.error('上传文件大小不能超过5MB，请重新上传');
                    }, 10);
                    return false
                }
                if (lastName.toLowerCase() !== '.pdf' ) {
                    this.$message.warning('文件必须为.pdf类型，请重新上传')
                    return false
                }
            },
            beforeUploadopus(file) {
                //格式验证
                let fileName = file.name
                let pos = fileName.lastIndexOf('.')
                const isLt10M = file.size / 1024 / 1024 < 10;
                let lastName = fileName.substring(pos, fileName.length)
                if (!isLt10M) {
                    setTimeout(() => {
                        this.$message.error('上传文件大小不能超过10MB，请重新上传');
                    }, 10);
                    return false
                }
                if (lastName.toLowerCase() !== '.zip' && lastName.toLowerCase() !== '.rar') {
                    this.$message.warning('文件必须为.zip或者.rar类型，请重新上传')
                    return false
                }
            },
            add() {
                this.$refs.formRef.validate((valid) => {
                    if (valid) { //验证通过
                        //添加当前的报名信息到数据库
                        // this.manualUpload()
                        this.enroll.newsid = this.news.id
                        this.enroll.title = this.news.title
                        this.enroll.sign = this.news.sign
                        this.enroll.pay = this.news.pay
                        this.$request.post('/enroll/add', this.enroll).then(res => {
                            if (res.code === '200') {
                                //更新成功
                                this.$message.success('保存成功')
                                this.$router.push('/news')
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                })
            },
        }
    }

</script>

<style scoped>

</style>